<!--
 * @Author: 王欣磊
 * @Date: 2024-07-13 00:19:50
 * @LastEditors: 王欣磊
 * @LastEditTime: 2024-10-18 15:48:53
 * @Description: 
 * @FilePath: /safe-platform-ui/src/components/PreviewModal/PreviewModal.vue
-->
<template>
  <el-dialog
    :visible.sync="showModal"
    custom-class="b75H9q5J8"
    :show-close="false"
    :modal-append-to-body="false"
    v-bind="$attrs"
  >
    <div
      class="custom-header"
      slot="title"
      :style="{
        '--img-cross': `url(${getImageCommon('dialog.cross')})`,
      }"
    >
      <span class="header-title">在线预览</span>
      <div class="icon" @click="showModal = false" />
    </div>
    <div
      class="preview-content-wrap"
      :style="{
        '--bg-bottom-left': `url(${getImageCommon('dialog.bottomLeft')})`,
        '--bg-bottom-right': `url(${getImageCommon('dialog.bottomRight')})`,
      }"
    >
      <div class="decoration decoration--bottom-left" />
      <div class="decoration decoration--bottom-right" />
      <div class="preview-content" flex-center v-loading="isLoading">
        <iframe
        v-if="iframeUrl"
          :src="iframeUrl"
          frameborder="0"
          width="100%"
          height="100%"
        ></iframe>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import getImage from "./assets/images";
import getImageCommon from "@/assets/images/common";
import { getKKFilePreviewUrl } from "@/utils/file";

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: null,
    },
  },
  components: {},
  data() {
    return {
      showModal: this.value,
      iframeUrl: "",
      isLoading:false
    };
  },
  methods: {
    getImage,
    getImageCommon,
    async getRealFileUrl(url){
      if (!url) return "";
      this.isLoading = true
      const res  = await getKKFilePreviewUrl(url).finally(()=>{
        this.isLoading = false
      })
      this.iframeUrl = res
    }
  },
  computed: {

  },
  watch: {
    value(val) {
      this.showModal = val;
    },
    showModal(val) {
      this.$emit("input", val);
    },
    url:{
      handler(val) {
        this.getRealFileUrl(val)
      },
      immediate: true,
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  .b75H9q5J8 {
    top: 50%;
    left: 50%;

    width: var(--modal-width, 80vw);
    margin: 0 !important;

    transform: translate(-50%, -50%);

    background: transparent;
    box-shadow: none;

    .el-dialog {
      &__body {
        padding: 0;
      }

      &__header {
        padding: 0;
      }
    }

    .custom-header {
      font-size: 18px;
      font-weight: bold;
      line-height: 18px;

      position: relative;

      display: flex;
      align-items: center;

      padding: 16px;
      padding-left: 22px;

      color: #fff;
      background-color: #fff;

      mask-image: linear-gradient(
      139deg,
      #fff,
      #fff 4.8px,
      transparent,
      transparent 9.2px,
      #fff 9.2px,
      #fff 100%
      );

      &::before {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100%;

        content: '';

        background: linear-gradient(
        to right,
        rgba(36, 145, 255, 1),
        rgba(36, 145, 255, 0)
        );
      }

      &::after {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 2px;

        content: '';

        background: linear-gradient(
        to right,
        rgba(26, 128, 237, 1),
        rgba(26, 128, 237, 0)
        );
      }

      .header-title,
      .icon {
        z-index: 1;
      }

      .icon {
        position: absolute;
        top: calc(50% - 7px);
        right: 16px;

        width: 14px;
        height: 14px;

        cursor: pointer;
        transition: all .2s ease;

        background-image: var(--img-cross);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        &:hover {
          filter: brightness(1.1);
        }

        &:active {
          transform: scale(.99);
        }
      }

      .decoration {
        $left-width: 114px;

        position: absolute;
        z-index: 0;
      }
    }
  }

  .preview-content {
    height: 80vh;
    padding: 16px;
    padding-top: 20px;

    background-color: #f5fafd;
    // 挖掉左下角和右下角的装饰（各为宽高 8px 的正方形）

    clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) calc(100% - 7px),
    calc(100% - 7px) 100%,
    7px 100%,
    7px calc(100% - 7px),
    0% calc(100% - 7px)
    );

    &-wrap {
      position: relative;

      .decoration {
        position: absolute;
        z-index: 1;

        &--bottom-left {
          bottom: 0;
          left: 0;

          width: 8px;
          height: 8px;

          background-image: var(--bg-bottom-left);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        &--bottom-right {
          right: 0;
          bottom: 0;

          width: 8px;
          height: 8px;

          background-image: var(--bg-bottom-right);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .empty {
    width: 250px;
    margin: 10px auto;
    margin-top: 20px;
  }
}

</style>
